<template>
  <div>
    <table border="1">
      <tr>
        <td v-for="(itme, key) in type" v-bind:key="key">{{item}}</td>
      </tr>
      <template>
        
      </template>
    </table>
  </div>
</template>

<script>
export default {
  data() {
    return {
      type: ['Standard', 'Listening', 'Speaking'],
      role: ['Examner', 'Invigilator', 'Supervisor'],
      mapping: [
        {Role: 'Examner', Type: 'Standard'},
        {Role: 'Examner', Type: 'Listening'}, 
        {Role: 'Supervisor', Type: 'Listening'}, 
        {Role: 'Supervisor', Type: 'Speaking'},
        {Role: 'Invigilator', Type: 'Speaking'}
      ]
    }
  },
  props: {
    datamodel: Array,
    queryPath: Object,
    customColumns: Array
  },
  mounted() {
    this.type.unshift("Role/Type")
    this.init()
  },
  methods: {
    init() {
      let _this = this
      //构建head
      var typeClone = type.slice();
      typeClone.unshift('Role/Type');
      _this.buildRow(typeClone)

      //构建body
      var tmp = [];
      for(var i = 0, len = role.length; i < len; i++){
        tmp.length = 0;
        tmp.push(role[i]);
        for(var j = 0, len2 = type.length; j < len2; j++){
          tmp.push(this.isMap(role[i], type[j]) ? '@': '');
        }
        _this.buildRow(tmp);
      }
    },
    buildRow(tds) {
      els.push('<tr>');
      for(var i = 0, len = tds.length; i < len; i++){
        els.push('<td>' + tds[i] + '</td>')
      }
      els.push('</tr>');
    },
    isMap(role, type){
      for(var i = 0, len = mapping.length; i < len; i++){
        if(mapping[i].Role === role && mapping[i].Type === type){
          return true;
        }
      }
      return false;
    }
  }
}
</script>
